

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定作业</title>
	</head>
	<!-- 1.按钮和DIV的单击事件（三种绑定方式）
2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
3.登入页面
用户名输入框，
密码输入框，
提交按钮

任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	<style type="text/css">
					#div{
						width: 300px;
						height: 300px;
						background-color: blanchedalmond;
					}

	</style>
	<body>
		
		<div id="div" onclick="" onmouseenter="onmouSeenter()" onmouseleave="onmouseLeave()" onmousemove="onmouseMove()">
			
		</div>
		<button type="button" onclick="AEVL()">添加监听器</button>
		<button type="button" onclick="REL()">移除监听器</button>
		
		<form action="" method="post">
			用户名：<input type="text" name="" id="username" value="" onfocus="on_focus_username()" onblur="on_blur_usernmae()"/>
			<br>
			密码：<input type="password" name="" id="pwd" value="" onfocus="on_focus_password()" onblur="on_blur_password()"/>
			<br>
			<button type="button"id="btn">提交</button>
			
		</form>
		
		
	</body>
	<script type="text/javascript">
		function onmouSeenter(){
			console.log('进去div事件');
		}
		function onmouseLeave(){
			console.log('离开div事件');
		}
		function onmouseMove(){
			console.log('移动');
		}
		function mouseMove(){
			console.log('鼠标正在移动')
		}
		
		
		
		
		function AEVL(){
			document.getElementById('div').addEventListener('mousemove',mouseMove)
			alert('监听器添加成功');
		}
		function REL(){
			document.getElementById('div').removeEventListener('mousemove',mouseMove)
			alert('监听器移除成功');
		}
		
		
		
		
		function on_focus_username(){
			console.log('开始输入用户名');
		}
		function on_blur_usernmae(){
			console.log('用户名输入未完成');
			var username = document.getElementById('username');
			if(username.value ==' ')
			{
				alert('没有输入用户名');
				return;
			}
		}
		
		function on_focus_password(){
			console.log('开始输入密码');
		}
		
		function on_blur_password(){
			console.log('完成密码输入');
			var pwd = document.getElementById('pwd');
			if(pwd.value == ' '){
				alert('没有输入密码');
				return;
			}
			
			
		}
		
		
			document.getElementById('btn').onclick = function(){
			var name = document.getElementById('username');
			var pwd  = document.getElementById('pwd');
					if(name.value == ' ' && pwd.value == ' '){
						
						alert('用户名和密码为空');
						return;
						
					    }
					if(name.value == ' '){
						
						alert('用户名为空');
						return;
						
					    }
					if(pwd.value == ' '){
						
						alert('密码为空');
						return;
						
					    }

		}
		
		
		
	</script>
</html>
